<template>
  <view class="form-content" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <view class="form-group">
      <label for="name" class="form-label">昵称</label>
      <view class="input-wrapper">
        <uni-icons type="person" size="18" class="input-icon"></uni-icons>
        <input id="name" v-model="form.name" type="text" class="form-input" placeholder="请输入昵称" />
      </view>
      <view v-if="errors.name" class="error-message">{{ errors.name }}</view>
    </view>

    <view class="form-group">
      <label for="register-email" class="form-label">邮箱</label>
      <view class="input-wrapper">
        <uni-icons type="mail" size="18" class="input-icon"></uni-icons>
        <input id="register-email" v-model="form.email" type="text" class="form-input" placeholder="请输入邮箱" />
      </view>
      <view v-if="errors.email" class="error-message">{{ errors.email }}</view>
    </view>

    <view class="form-group">
      <label for="register-password" class="form-label">密码</label>
      <view class="input-wrapper">
        <uni-icons type="lock" size="18" class="input-icon"></uni-icons>
        <input 
          id="register-password"
          v-model="form.password" 
          :type="showPassword ? 'text' : 'password'" 
          class="form-input" 
          placeholder="请输入密码" 
        />
        <uni-icons
          :type="showPassword ? 'eye-filled' : 'eye-slash-filled'"
          size="18"
          class="toggle-password"
          @click="showPassword = !showPassword"
        ></uni-icons>
      </view>
      <view v-if="errors.password" class="error-message">{{ errors.password }}</view>
    </view>

    <view class="form-group">
      <label for="confirm-password" class="form-label">确认密码</label>
      <view class="input-wrapper">
        <uni-icons type="lock" size="18" class="input-icon"></uni-icons>
        <input 
          id="confirm-password"
          v-model="form.confirmPassword" 
          :type="showConfirmPassword ? 'text' : 'password'" 
          class="form-input" 
          placeholder="请再次输入密码" 
        />
        <uni-icons
          :type="showConfirmPassword ? 'eye-filled' : 'eye-slash-filled'"
          size="18"
          class="toggle-password"
          @click="showConfirmPassword = !showConfirmPassword"
        ></uni-icons>
      </view>
      <view v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</view>
    </view>

    <button type="button" class="btn-primary auth-btn" :disabled="isLoading" @click="onRegister">
      <template v-if="isLoading">
        <uni-icons type="spinner-cycle" size="20" class="loading-icon"></uni-icons>
        <text>注册中...</text>
      </template>
      <template v-else>注册</template>
    </button>
  </view>
</template>

<script>
import { register } from '@/api/user'
import { validateRegisterForm } from '@/utils/validation'
import { handleRegister as registerHandler } from '@/utils/registerHandler'

export default {
  name: 'RegisterForm',
  props: {
    switchTab: Function
  },
  data() {
    return {
      form: {
        name: '',
        email: '',
        password: '',
        confirmPassword: '',
        agreeTerms: false
      },
      errors: {},
      isLoading: false,
      showPassword: false,
      showConfirmPassword: false,
      // 移动端触摸事件相关
      touchStartX: 0,
      touchEndX: 0,
      // 键盘高度
      keyboardHeight: 0
    }
  },
  mounted() {
    // 监听键盘高度变化 (仅在App平台支持)
    // #ifdef APP-PLUS
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
      // 通过CSS变量传递键盘高度
      document.documentElement.style.setProperty('--keyboard-height', this.keyboardHeight + 'px');
    });
    // #endif
  },
  methods: {
    async onRegister() {
      await registerHandler({
        registerForm: {
          name: this.form.name,
          email: this.form.email,
          password: this.form.password
        },
        rawForm: this.form,
        setRegisterErrors: errs => { this.errors = errs },
        setLoading: val => { this.isLoading = val },
        register,
        validateRegisterForm,
        switchTab: this.switchTab,
        uni
      })
    },
    // 移动端触摸事件处理
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      // 可以添加滑动过程中的处理逻辑
    },
    handleTouchEnd(e) {
      this.touchEndX = e.changedTouches[0].clientX;
      this.handleGesture();
    },
    handleGesture() {
      const deltaX = this.touchEndX - this.touchStartX;
      const MIN_SWIPE_DISTANCE = 50;
      
      // 向右滑动切换到登录
      if (deltaX > MIN_SWIPE_DISTANCE) {
        this.switchTab('login');
      }
    }
  }
}
</script>

<style>
@import './login.css';
</style>